<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <el-input v-model="form.alipay_account" class="w-40" placeholder="账号名称"></el-input>
        <!-- <VCascader v-model="form.purchase_account_id" placeholder="使用人员" multiple collapse-tags
          style="min-width: 160px" /> -->
        <VSelect v-model="form.status" placeholder="状态" :options="options.status || []" multiple collapse-tags style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">更新时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/finance/statistic/add" type="primary" @click="handleRow('add')"><i class="dk-iconfont icon-Plus" />添加</VButton>
        <VExport auth="/purchase/finance/statistic/derive" mainKey="aa_id" url="/v1/finance/alipay-account/export" :name="baseName" :tableRef="tableRef" class="ml-auto" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import Add from './components/Add'


import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'

const baseName = 'alipay_account'
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 获取options
const options = ref({})
Promise.all([
  getOption({ type: baseName }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((acc, cur) => (((acc = { ...acc, ...cur }), acc)), {})
})

// 单行操作
const addRef = ref()
const handleRow = (name, row, rowIndex) => {
  const { aa_id, status } = row || {}
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    add: () => {
      addRef?.value.open()
    },
    edit: () => {
      addRef?.value.open(aa_id)
    },
    change: () => {
      showLoading()
      api.change({ aa_id, status: status === 1 ? 2 : 1 }).then(res => {
        ElMessage.success('操作成功')
        query()
      }).finally(closeLoading)
    },
    log: () => {
      logRef?.value.open({ log_type: baseName, aa_id })
    },
  }
  handle[name]()
}

// 列表配置
const tableOptions = reactive({
  showHeaderOverflow: false,
  formConfig: {
    data: {
      dateRange: { type: 'update_time', value: [], range: true },
    }
  },
  columns: [
    { title: '编号', field: 'aa_id', width: 60 },
    { title: '账号名称', field: 'alipay_account', minWidth: 180, slots: {
      default: ({row}) => <VText value={row.alipay_account} line={2} />
    } },
    { title: '状态', field: 'status_name', minWidth: 80, slots: {
      default: ({row}) => <VStatus value={row.status_name === '启用'} />
    } },
    { title: '备注', field: 'remark', minWidth: 140, slots: {
      default: ({row}) => <VText value={row.remark} line={2} />
    } },
    { title: '添加人', field: 'create_user', minWidth: 100 },
    { title: '更新时间', field: 'update_time', minWidth: 150 },
    {
      title: '操作',width: 140, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          const { status } = row
          // status	采购状态: 状态1启用2禁用
          return <div class='nm flex flex-wrap gap-x-2 gap-y-1'>
              <VButton auth="/purchase/finance/alipay/edit" link type="primary" onClick={() => handleRow('edit', row)}>编辑</VButton>
              <VButton auth="/purchase/finance/alipay/switch" link type="primary" onClick={() => handleRow('change', row, rowIndex)}>{status === 1 ? '禁用' : '启用'}</VButton>
              <VButton auth="/purchase/finance/alipay/log" link type="primary" onClick={() => handleRow('log', row)}>日志</VButton>
          </div>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  